<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-16 10:16:50
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-09-08 09:54:52
 * @FilePath     : \rpms\src\views\project\implementation\detail\index.vue
-->
<template>
  <div>
    <!-- <el-card> -->
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266'
          }"
        >
          <template #empty>
            <el-empty :image-size="40" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" />
          <el-table-column label="变更/终止原因">
            <template #default="{ row }">
              {{ row.alterationMatters || row.alterationReason }}
            </template>
          </el-table-column>
          <el-table-column label="变更/终止事由">
            <template #default="{ row }">
              {{ row.alterationReason }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createUserName"
            label="申请人"
          ></el-table-column>
          <el-table-column prop="createTime" label="申请时间"></el-table-column>

          <el-table-column label="审批状态">
            <template #default="{ row }">
              {{ row.applyStatus === "3" ? "已结束" : "审核中" }}
            </template>
          </el-table-column>

          <el-table-column>
            <template #default="{ row }">
              <el-button type="text" @click="handleLook(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <!-- </el-card> -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { postAlterationList } from "/@/api/change";
// import { useUpload } from "/@/hooks";
const route = useRoute();
const router = useRouter();
let tableData = ref([]);

const handleLook = row => {
  const { id } = row;
  const mode = row.alterName.indexOf("变更") !== -1 ? "change" : "stop";
  router.replace({
    path: "/project/change/detail",
    query: {
      id,
      flowId: row.flowId,
      taskId: row.curTaskId,
      instanceId: row.instanceId,
      nodeId: row.nodeStatusCode && row.nodeStatusCode.toLocaleUpperCase(),
      approvalTypeCode: row.approvalTypeCode,
      isSkipAlter: row.isSkipAlter,
      applyStatus: row.applyStatus,
      mode
    }
  });
};

// const { uploadComUrl, acceptTypes, uploadHeaders } = useUpload();

// 获取项目详情
const initProjectInfo = async () => {
  const { code, data } = await postAlterationList({
    projectManageId: route.query?.id,
    pageNum: 1,
    pageSize: 10
  });
  if (code === 200) {
    tableData.value = data.list;
  }
};

initProjectInfo();
</script>

<style lang="scss" scoped>
.empt-content {
  height: calc(100vh - 200px);
  width: 100%;
}

.card-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-btn {
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
